<script setup>
import UserBar from '@/components/UserBar.vue'
import { Tickets, Edit, DArrowRight } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/modules/user'
import { GetAllNodeService } from '@/api/node.js'
import NodeUpdate from './components/NodeUpdate.vue'
const router = useRouter()
const useStore = useUserStore()
// 当前选中的节点
const activeIndex = ref(-1)

// 选择当前查看的节点
// const selectedNode = async (name, index) => {
//   const {
//     data: { data }
//   } = await GetNodeByName(name)
//   activeIndex.value = index
//   selectednodeinfo.value = { ...data }
//   //传递参数至节点界面
//   router.push({
//     path: '/task',
//     query: {
//       id: data.id,
//       name: data.name,
//       mode: data.mode,
//       addr: data.addr,
//       status: data.status,
//       source: data.source
//     }
//   })
// }

//节点列表参数
const nodeList = ref([])
const total = ref(0)
const nodeparams = ref({
  current: 1,
  size: 5,
  hostUrl: ''
})
nodeparams.value.hostUrl = window.location.host
// 缓冲参数
const loading = ref(false)
// 获取节点列表
const getNodeList = async () => {
  try {
    loading.value = true
    const {
      data: { data }
    } = await GetAllNodeService(nodeparams.value)
    loading.value = false
    nodeList.value = data.list
    total.value = data.total
    if (data.list.length !== 0) {
      // 默认加载第一个节点的详细信息
      // activeIndex.value = 0
      // selectedNode(data.list[0].name, 0)
    }
  } catch (error) {
    console.error('Error fetching node list:', error)
  }
}

// 初始化获取节点列表
getNodeList()

// 处理分页逻辑
const onSizeChange = (size) => {
  // 只要是每页条数变化了，那么原本正在访问的当前页意义不大了，数据大概率已经不在原来那一页了
  // 重新从第一页渲染即可
  nodeparams.value.current = 1
  nodeparams.value.size = size
  // 基于最新的当前页 和 每页条数，渲染数据
  getNodeList()
}
const onCurrentChange = (page) => {
  // 更新当前页
  nodeparams.value.current = page
  // 基于最新的当前页，渲染数据
  getNodeList()
}

// 编辑节点的基本信息
const nodeUpdateRef = ref()
const nodeEdit = (nodeInfo) => {
  nodeUpdateRef.value.open(nodeInfo)
}

// 进入节点
const nodeEnter = (nodeInfo) => {
  ElMessageBox.confirm('确认进入 ' + nodeInfo.name + ' 节点?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      // 将选择的节点信息存储起来
      useStore.setNodeName(nodeInfo.name)

      // 进入节点
      router.push('/task')
    })
    .catch(() => {})
}
</script>

<template>
  <UserBar />
  <div class="page-container">
    <el-row>
      <el-col :span="24">
        <div class="header">
          <el-icon :size="26">
            <Tickets />
          </el-icon>
          <h1 style="margin-right: 23%; font-size: 22px">#节点列表</h1>
        </div>
        <!-- 节点列表 -->
        <div
          class="table"
          style=""
          v-loading="loading"
          v-if="nodeList.length !== 0"
        >
          <ul
            v-for="(item, index) in nodeList"
            :key="index"
            style="display: flex; justify-content: space-between"
            :style="{
              backgroundColor: activeIndex === index ? '#0C1F4A' : '#313862',
              cursor: item.status === 'stopping' ? 'no-drop' : 'pointer' // 根据状态设置光标样式
            }"
            @click="activeIndex = index"
          >
            <!-- 表格区域 start -->
            <li
              style="
                width: 200px;
                overflow: hidden; /* 隐藏超出部分 */
                text-overflow: ellipsis; /* 省略号 */
                margin-left: 30px;
              "
            >
              {{ item.name }}
            </li>
            <li
              style="width: 100px; margin-right: 100px"
              :style="{ color: item.status === 'stopping' ? 'red' : 'green' }"
            >
              {{ item.status }}
            </li>
            <li style="width: 75px; margin-right: 200px">{{ item.mode }}</li>
            <li style="margin-right: 150px">
              <el-icon
                size="large"
                style="margin-right: 50px; padding: 5px"
                @click="nodeEdit(item)"
                ><Edit
              /></el-icon>
              <el-icon size="large" @click="nodeEnter(item)"
                ><DArrowRight
              /></el-icon>
            </li>
          </ul>
        </div>
        <div class="footer">
          <!-- 分页区域 -->
          <el-pagination
            v-model:current-page="nodeparams.current"
            v-model:page-size="nodeparams.size"
            :page-sizes="[2, 3, 5, 10]"
            :background="true"
            layout="jumper, total, sizes, prev, pager, next"
            :total="total"
            @size-change="onSizeChange"
            @current-change="onCurrentChange"
            style="margin-top: 20px; justify-content: flex-end; color: #fff"
          />
        </div>
      </el-col>
    </el-row>
  </div>

  <!-- 节点修改模块 -->
  <NodeUpdate ref="nodeUpdateRef" @success="onSizeChange(5)"></NodeUpdate>
</template>

<style lang="scss" scoped>
body {
  background-color: #1b1f38;
}
.page-container {
  min-height: 100vh;
  // box-sizing: border-box;
  // outline: none;
  --el-card-border-color: rgb(27, 31, 56);
  color: #fff;
  background-color: #1b1f38;
  border: #1b1f38;
  border-radius: 0%;
}

h1 {
  margin: 0;
  padding: 0;
}

.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #fff;
  background-color: rgba(148, 144, 144, 0.3) 25;
}
/* 修改前后箭头未点击时的背景颜色 */
:deep .el-pagination .btn-prev,
:deep .el-pagination .btn-next {
  background-color: rgb(58, 65, 106) !important;
}

/* 修改未点击时的数字方块背景颜色 */
:deep .el-pagination .el-pager li:not(.active):not(.disabled):hover {
  background-color: rgb(58, 65, 106) !important;
}

/* 未点击时的数字方块背景颜色 */
:deep .el-pagination .el-pager li:not(.active):not(.disabled) {
  background-color: rgb(58, 65, 106) !important;
  color: #fff;
}
:deep .el-pagination.is-background .el-pagination__jump.is-first {
  color: #fff !important;
}
:deep .el-pagination.is-background .el-pagination__total {
  color: #fff !important;
}
:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background-color: rgb(58, 65, 106) !important; //修改默认的背景色
  color: #fff;
}
:deep .el-input__wrapper {
  background-color: rgb(58, 65, 106) !important ;
  box-shadow: 0 0 0 0 !important;
}
:deep .el-input__inner {
  color: #fff;
}
.header {
  display: flex;
}

.table {
  box-sizing: content-box;
}

ul {
  padding: 20px 20px;
  display: flex;
  align-items: stretch;
  // background-color: rgb(49, 56, 98);
  margin-bottom: 20px;
  // align-content: center;
  align-items: center;
  // justify-content: center;
}

ul li {
  list-style: none;
  // margin-bottom: 20px;
  padding: 0;
  // line-height: 60px;
}

.select_box {
  /* 默认placeholder样式 */
  :deep .el-input__inner::placeholder {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    line-height: 30px;
  }

  /* 默认框状态样式更改 */
  :deep .el-input__wrapper {
    height: 45px;
    color: #4b617a;
    background-color: rgb(58, 65, 106) !important;
    box-shadow: none !important;
    /* 使用none替代透明边框 */
  }

  /* 修改下拉框focus时的样式 */
  :deep .is-focus .el-input__wrapper {
    box-shadow: 0 0 0 1px #8091a5 inset !important;
  }

  /* 清除按钮颜色 */
  // :deep .el-select__caret {
  //   color: #fff !important;
  // }

  /* 选中字体色 */
  :deep .el-input__inner {
    color: #fff !important;
  }
}

/* 下拉框-展开样式 */
/* 展开下拉背景及边框 */
:deep .el-popper {
  background-color: #8091a5 !important;
  border: 1px solid #8091a5 !important;
}

/* 下拉项hover样式 */
.el-select-dropdown__item.hover {
  background-color: #4b87dbe0 !important;
}

/* 下拉项颜色 */
.el-select-dropdown__item {
  color: #fff !important;
  text-align: center;
  background-color: #435984;
}

/* 箭头按钮样式（通常不需要修改背景色，只修改边框色即可） */
:deep .el-popper .el-popper__arrow::before {
  border-top-color: #fff !important;
  /* 修改箭头边框颜色 */
}
.add-task {
  width: 273px;
  height: 123px;
  text-align: center;
  line-height: 123px;
  color: #727070;
  border-radius: 3px;
  border: #727070 solid 1px;
  cursor: pointer;
  margin-left: 15px;

  &:hover {
    border-color: #fff;
    color: #fff;
  }
}

// //滚动条
// /* 定制滚动条的整体部分 */
// ::-webkit-scrollbar {
//   width: 12px;
// }

// /* 定制滚动条的轨道 */
// ::-webkit-scrollbar-track {
//   background: #e1e9f0; /* 更浅一些的蓝色 */
// }

// /* 定制滚动条的滑块 */
// ::-webkit-scrollbar-thumb {
//   background: #3f527d; /* 深蓝色 */
// }

// /* 当鼠标悬停在滑块上时改变颜色 */
// ::-webkit-scrollbar-thumb:hover {
//   background: #3b5ba0; /* 更深一点的蓝色 */
// }

input {
  padding-left: 10px;
  /* width: 273px;/ */
  /* width: 200px; */
  height: 36px;
  background: rgba(0, 0, 0, 0);
  border: 1px solid rgb(58, 65, 106);
  /* opacity: 0.8; */
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #8091a5;
  line-height: 24px;
  /* text-align: center; */
  font-style: normal;
  text-transform: none;
  outline: none;
  background-color: rgb(58, 65, 106);
}

//下拉框
/* styles/custom-elements.css */
.el-select .el-input .el-input__inner {
  background-color: #33608f !important; /* 背景颜色 */
  color: #ffffff; /* 文字颜色 */
  border-color: #213c58; /* 边框颜色 */
}

.el-select .el-input .el-input__inner:hover {
  border-color: #0056b3; /* 鼠标悬停时的边框颜色 */
}

.el-select .el-input.is-focus .el-input__inner,
.el-select .el-input.is-active .el-input__inner {
  border-color: #0056b3; /* 获得焦点时的边框颜色 */
}

.el-select-dropdown {
  background-color: #007bff; /* 下拉菜单背景颜色 */
}

.el-select-dropdown li {
  color: #ffffff; /* 下拉菜单文字颜色 */
}

.el-select-dropdown li.hover,
.el-select-dropdown li:hover {
  background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.dropdown ul {
  padding-bottom: 10px;
  font-size: 18px;
}
.dropdown ul li {
  padding: 0 8px;
}
.node-item:hover {
  background-color: rgb(27, 31, 56);
}
</style>
